<template>
  <div class="home-container" ref="container" @wheel="handleWheel" v-loading="loading">
    <ul class="carousel-container" :style="{ marginTop }" @transitionend="handleTransition">
      <li v-for="items in data" :key="items.id">
        <CarouselItem :carousel="items"  />
      </li>
    </ul>
    <div v-show="index >= 1" class="icon iconup" @click="switchTo(index - 1)">
      <Icon type="arrowUp" />
    </div>
    <div v-show="index < data.length - 1" class="icon icondown" @click="switchTo(index + 1)">
      <Icon type="arrowDown" />
    </div>
    <ul class="indicator">
      <li :class="{ active: i === index }" v-for="(items, i) in data" :key="items.id" @click="switchTo(i)"></li>
    </ul>
  </div>
</template>

<script>
import CarouselItem from './Carouselitem.vue';
import Icon from "@/components/Icon";
import {mapState} from 'vuex'

export default {
  components: { CarouselItem, Icon },
  data() {
    return {
      index: 0,   //当前显示的是第几张轮播图
      containerHeight: 0,  //整个容器的高度
      switching: false,  //是否正在切换中
    }
  },
  created(){
    this.$store.dispatch("banner/fetchBanner")
  },
  methods: {
    //切换轮播图
    switchTo(i) {
      this.index = i;
    },
    //鼠标滚轮事件
    handleWheel(e) {
      console.log(e.deltaY)
      if (this.switching) {
        //如果正在滚动,就不做任何操作
        return;
      }
      
      if (e.deltaY === -100&&this.index>0) {
        //上一个 
        this.switching = true
        this.index--;
      } else if (e.deltaY===100&&this.index<this.data.length-1) {
        //下一个
        this.switching = true
        this.index++;
      }
    },
    handleTransition(){
      //动画完成的时候触发
      this.switching = false
    },
    handleReszie(){
      this.containerHeight = this.$refs.container.clientHeight;
    },
  },
  computed: {
    marginTop() {
      return -this.index * this.containerHeight + 'px';
    },
    ...mapState("banner",["loading","data"]),
  },
   
  mounted() {
    this.containerHeight = this.$refs.container.clientHeight;
    window.addEventListener("resize",this.handleReszie)
  },
  destroyed(){
    window.removeEventListener("resize",this.handleReszie)
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/mixin.less";
@import "~@/styles/var.less";

.home-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;


  ul {
    margin: 0;
    list-style: none;
    padding: 0
  }
}

.carousel-container {
  width: 100%;
  height: 100%;
  transition: 500ms;

  li {
    width: 100%;
    height: 100%
  }
}

.icon {
  .self-center();
  @gap: 25px;
  color: @gray;
  cursor: pointer;

  &.iconup {
    top: @gap;
    animation: jump-up 2s infinite;
  }

  &.icondown {
    top: auto;
    bottom: @gap;
    animation: jump-down 2s infinite;
  }

  @jump: 5px;

  @keyframes jump-up {
    0% {
      transform: translate(-50%, @jump);
    }

    50% {
      transform: translate(-50%, -@jump);
    }

    100% {
      transform: translate(-50%, @jump);
    }
  }

  @keyframes jump-down {
    0% {
      transform: translate(-50%, -@jump);
    }

    50% {
      transform: translate(-50%, @jump);
    }

    100% {
      transform: translate(-50%, -@jump);
    }
  }
}

.indicator {
  .self-center();
  transform: translateY(-50%);
  left: auto;
  right: 25px;
  cursor: pointer;

  li {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: @words;
    margin-bottom: 10px;
    border: 1px solid #fff;
    box-sizing: border-box;
    transition: 0.5s;

    &.active {
      background: white;
    }
  }
}
</style>